<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备变量监控折线图</title>
  <!-- 使用CDN避免本地资源依赖问题 -->
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: transparent;
    }
    #chartContainer {
      /*width: 75%;*/
      /*height: 480px;*/
      width: 90%;               /* 宽度 20%，小图表 */
      height: 105vh;             /* 高度占屏幕 30% */
      /*margin: 0 auto; !* 上边距 10vh，水平居中 *!*/
      margin: -5vh 2% 0 2%;          /* 上 右 下 左 */
      background: transparent;
      /* aspect-ratio: 16 / 9; */ /* 保持 16:9 比例，可尝试开启 */
    }

  </style>
</head>
<body>
<div id="chartContainer"></div>

<script>
  // 1. 关键修改：使用相对路径（避免硬编码IP导致跨域）
  const API_URL = '/deviceInfo/types/query/tree'; // 去掉http://localhost:8099
  const MAX_POINTS = 50;
  const REFRESH_INTERVAL = 1000;
  const TIMEOUT = 8000; // 延长超时时间（局域网可能延迟高）

  // 从URL读取参数
  const urlParams = new URLSearchParams(window.location.search);
  const TARGET_VAR = urlParams.get('variableEnName') || "mildMildfurnperf";
  const Y_MIN = urlParams.get('xMin') ? parseFloat(urlParams.get('xMin')) : null;
  const Y_MAX = urlParams.get('xMax') ? parseFloat(urlParams.get('xMax')) : null;
  const EQUIPMENT_NAME = urlParams.get('equipmentName') || "MILD富氧燃烧实验炉";

  let dataPoints = [];
  let isRequesting = false;
  let mainTimer = null;

  const chartDom = document.getElementById('chartContainer');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    let chartOption = {
      backgroundColor: 'transparent',
      color: ['#57D2FF'],
      tooltip: {
        trigger: 'axis',
        formatter: (params) => `时间：${params[0].name}<br>值：${params[0].value.toFixed(2)}`,
        textStyle: { color: '#ffffff', fontSize: 12 },
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        padding: 8,
      },
      grid: {
        left: '8%',
        right: '5%',
        bottom: '25%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [],
        boundaryGap: false,
        axisLabel: {
          rotate: 45,
          fontSize: 10,
          interval: 'auto',
          color: '#ffffff'
        },
        axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.6)', width: 1 } },
        splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } }
      },
      yAxis: {
        type: 'value',
        min: Y_MIN,
        max: Y_MAX,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.3)', // 刻度线更明显
            width: 1
          }
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 14,
          formatter: '{value}'
        },
        axisLine: {
          show: true, // ✅ 确保显示轴线
          lineStyle: { color: '#ffffff', width: 1 }
        },
        axisTick: {
          show: true, // ✅ 显示刻度线
          lineStyle: { color: '#ffffff' }
        }
      },
      series: [{
        name: TARGET_VAR,
        type: 'line',
        data: [],
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: { width: 2, color: '#57D2FF' },
        itemStyle: { color: '#ffffff' },
        connectNulls: true
      }]
    };
    myChart.setOption(chartOption);

    // 时间格式化函数
    function formatTime(date) {
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    }

    // 处理响应
    function handleResponse(data) {
      const variables = data.data?.variables || [];
      const target = variables.find(v => v.variableEnName === TARGET_VAR);

      if (!target) return;

      // 强制转换为数字
      let currentValue = Number(target.variableValue);

      // 如果不是有效数字，直接丢掉
      if (!Number.isFinite(currentValue)) return;

      const currentTime = formatTime(new Date());

      dataPoints.push({ time: currentTime, value: currentValue });

      if (dataPoints.length > MAX_POINTS) {
        dataPoints.shift();
      }

      myChart.setOption({
        xAxis: { data: dataPoints.map(p => p.time) },
        series: [{
          data: dataPoints.map(p => p.value),
          connectNulls: true,   // 避免断点
          showSymbol: false     // 不显示每个点的圆圈，让线更平滑
        }]
      });
    }

    // POST请求逻辑（核心修复）
    function fetchData() {
      if (isRequesting) return;
      isRequesting = true;

      // 2. 关键修复：使用jQuery的$.ajax替代原生XHR（自动处理跨域兼容）
      $.ajax({
        url: API_URL,
        type: 'POST',
        contentType: 'application/json',
        timeout: TIMEOUT,
        data: JSON.stringify({
          equipmentTypeName: EQUIPMENT_NAME
        }),
        success: function(data) {
          handleResponse(data);
        },
        error: function(xhr, status, error) {
          // 3. 详细错误日志（帮助排查问题）
          console.error('请求错误：', {
            status: status,
            error: error,
            responseText: xhr.responseText,
            statusCode: xhr.status
          });
          // 针对性提示
          if (xhr.status === 0) {
            console.error('无法连接到服务器，请检查IP和端口是否正确');
          } else if (xhr.status === 403) {
            console.error('服务器拒绝访问，请检查跨域配置');
          } else if (xhr.status === 404) {
            console.error('请求地址不存在：', API_URL);
          }
        },
        complete: function() {
          isRequesting = false; // 无论成功失败都释放锁
        }
      });
    }

    // 启动定时器（确保图表初始化后执行）
    function startTimers() {
      if (mainTimer) clearInterval(mainTimer);
      mainTimer = setInterval(fetchData, REFRESH_INTERVAL);
      fetchData(); // 立即请求一次
    }

    // 页面完全加载后启动
    window.addEventListener('load', function() {
      startTimers();
      window.addEventListener('resize', () => myChart.resize());
    });

    // 页面关闭清理
    window.onbeforeunload = function() {
      if (mainTimer) clearInterval(mainTimer);
    };
  } else {
    console.error('图表容器 #chartContainer 不存在');
  }
</script>
</body>
</html>
